<!--销售单详情-->
<template>
  <div class="app-container">
    <div class="app-nav">
      <i class="el-icon-back icons" @click="goBack"></i>
      <span class="hyName">返回</span>
    </div>
    <div style="overflow:hidden">
      <p class="zc" style="float:left;margin-right:20px">订单编号 </p>
      <div style="float:left;">
        <p>订单编号：{{orderId}}</p>
        <p>付款时间：{{payTime}}</p>
        <p>完成时间：{{finishedTime}}</p>
        <p>门店名称：{{storeName}}</p>
        <p>会员昵称：{{username}}</p>
        <p>会员账号：{{account}}</p>
      </div>
    </div>
    <div class="shrxx">商品名称 <hr size="40" /></div>
    <public-table
      :show-index="true"
      :show-select="false"
      :table-head="tableHead"
      :table-data="tableData"
    >
    </public-table>
    <Pagination
      ref="myPagination"
      :sum-total="sumTotal"
      @handle-size="handlePageSize"
      @handle-current="handlePageCurrent"
    />
    合计：{{createTime}}
  </div>
</template>

<script>
import { infoList } from '@/api/members'
import PublicTable from '@/components/Tables/PublicTable'
import Pagination from '@/components/Pagination'
import { Basic } from '@/api/base'
export default {
  components: {
    PublicTable,
    Pagination,
    Basic
  },
  filters: {
    orderSourceFilter(source) {
      switch (source) {
        case 1:
          return 'APP'

        case 2:
          return '小程序'

        case 3:
          return 'PC'

        default:
          return '----'
      }
    }
  },
  data() {
    return {
      tableHead: [
        { label: '商品名称', value: 'goodsName' },
        { label: '商品类型', value: 'goodsType' },
        { label: '售价', value: 'price' },
        { label: '数量', value: 'amount' },
        { label: '服务费', value: 'serviceMoney' },
        { label: '小计', value: 'countMoney' }
      ],
      // 分页
      sumTotal: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],

      orderId: '',
      payTime: '',
      finishedTime: '',
      storeName: '',
      username: '',
      account: '',
      orderId: '', // 传递过来的详情会员ID
      createTime: '', // 注册时间
      level: '', // 会员等级
      nickname: '', // 会员名称
      source: '', // 来源渠道
      tagNameList: '', // 会员标签
      groupNameList: '' // 会员分组
    }
  },
  computed: {},
  mounted() {
    this.infoDetail()
  },
  methods: {
    goBack() { // 返回上一级
      this.$router.go(-1)
    },
    // 获取详情页面信息
    infoDetail() {
      const vm = this
      const params = {
        orderId: vm.$route.query.orderId
      }
      Basic.general('order/store/detail',params).then(res => {
        if (res.code === 200) {
          vm.tableData = res.goodsList
          vm.orderId = res.orderId
          vm.payTime = res.payTime
          vm.finishedTime = res.finishedTime
          vm.storeName = res.storeName
          vm.username = res.username
          vm.account = res.account
        }
      })
    },
    // 分页
    handlePageSize(val) {
      this.pageSize = val
      this.getTableData()
    },
    // 分页
    handlePageCurrent(val) {
      this.currentPage = val
      this.getTableData()
    }
  }
}
</script>
<style lang='scss' scoped>
::v-deep .app-nav {
  height: 66px;
  line-height: 66px;
  position: relative;
}
.icons {
  font-size: 20px;
}
.hyName {
  display: inline-block;
  margin-left: 15px;
  font-size: 20px;
}
.gmcs {
  float: right;
}
.zc {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
}
.xfze {
  position: absolute;
  right: 24px;
  top: 115px;
}
.shrxx {
  padding: 25px 0;
  font-size: 16px;
  position: relative;
  font-family: PingFangSC, PingFangSC-Regular;
}
hr{
  color: rgba(0, 0, 0, 0.85);
  position: absolute;
  left: 0px;
  top: 38px;
  width: 80px;
}
.shri{
  display: inline-block;
  height: 1px;
  background: red;
}
.hyfz{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  width: 250px;
}
</style>
